<template>
	<view :style="[{ height: windowHeight + 'px' }]">
		<cu-custom bgColor="bg-gradual-blue-light" title="个人名片二维码" :isBack="true" backText="返回"></cu-custom>
		<view style="display: flex;align-items: center;min-height: 100rpx;"></view>
		<view style="padding-top: 180rpx;">
			<view class="cu-card  ">
				<view class="cu-item shadow">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" ><img :src="photoPath" style="width: 100%;height: 100%;" ></view>
							<view class="content flex-sub">
								<view style="font-size: 36rpx;">{{ fullName }}</view>
								<view class="text-gray ">{{areaName}}</view>
							</view>
						</view>
					</view>
					<view class="text-center" style="font-size: 62rpx;">{{ currentTime }}</view>
					<view class="text-gray text-center">
						<view v-if="codeUrl"><image :src="codeUrl" style="width: 600rpx;height: 600rpx;"></image></view>
					</view>
					<view class="text-gray text-center padding" @click="refresh">
						<text>{{ codeText }}</text>
						<text class="cuIcon-refresh"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import store from '@/store';
import reqConfig from '@/common/config/reqConfig.js';
import miment from 'miment'

export default {
	onReady() {
		this.initCodeUrl();
	},
	data() {
		return {
			windowHeight: this.$windowHeight,
			timer: '', //定义一个定时器的变量
			reloadTimer: '', //刷新二维码定义一个定时器的变量
			currentTime: miment().format('YYYY年MM月DD日 hh:mm:ss'), // 获取当前时间
			codeClick: true,
			codeText: '扫一扫上面的二维码图案，查看我名片',
			codeUrl: null,
			fullName: store.state.hh_user.fullName,
			areaName: store.state.hh_areaName,
			accessToken: store.state.hh_token,
			sex: store.state.hh_user.sex,
			photoPath: store.state.hh_user.photoPath?store.state.hh_user.photoPath:(sex=='2'?'/static/user/avatar_gril.png':'/static/user/avatar_boy.png')
		};
	},
	onLoad() {
		var vm = this;
		vm.timer = setInterval(() => {
			vm.currentTime = miment().format('YYYY年MM月DD日 hh:mm:ss');
		}, 1000);
	},
	methods: {
		refresh() {
			clearInterval(this.reloadTimer);
			this.initCodeUrl();
		},
		initCodeUrl() {
			const vm = this;
			if (vm.codeClick) {
				const url =
					reqConfig.baseUrl +
					'/app/api/QRCode/getQRCode?accessToken='+this.accessToken+'&applyType=3&time=' +
					new Date().getTime();
				vm.codeUrl = url;
				vm.codeClick = false;
				vm.codeText = '已刷新';
				// 倒计时开始
				let daojishi = 300;
				vm.reloadTimer = setInterval(function() {
					daojishi--;
					if (daojishi <= 290) {
						vm.codeText = '扫一扫上面的二维码图案，查看我名片';
					}
					if (daojishi <= 0) {
						vm.codeClick = true;
						clearInterval(vm.reloadTimer);
						vm.initCodeUrl();
					}
				}, 1000);
			}
		}
	},
	computed: {
		photoStyle() {
			return `background-image: url(${this.photoPath});`
		}
	},
	beforeDestroy() {
		if (this.timer) {
			clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
		}
		if (this.reloadTimer) {
			clearInterval(this.reloadTimer); // 在Vue实例销毁前，清除我们的定时器
		}
	}
};
</script>

<style></style>
